<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	var myObject = function(){    
		var  value = 0;   //함수 내부용 private  외부에서 접근할수 없다. 
		return {
			increment : function(inc){
				value += typeof inc ==='number'?inc : 1;
			},
			getValue : function(){
				return value;
			}
		};
	}();  //function을 호출한것임. 호출 결과를 myObject에 인젝션;
	myObject.increment(5);
	pt(myObject.getValue()); //5
	pt(myObject.value);    //undefined
	
	var fade = function(node){
		var level =1;
		var step = function(){
			var hex = level.toString(16);
			node.style.backgroundColor = "#ffff"+hex+hex;
			if(level < 15){
				lelve +=1;              //외부함수가 우선 반환되었지만, 외부변수가 필요한 내부함수가 있을경우 유지된다. 
				setTimeout(step,100);
			}
		};
		setTimeout(step,100);
	};
	
	
	
	// 아래 예제는 클로저를 잘못이해 한 케이스 내부함수는 외부변수의 복사본을 가지는게 아니라  변수 자체에 접근한다는걸 명심해야 한다. 
	
	var addHandeler = function(nodes){
		var i;
		//각 노드에 클릭이벤트를 적용해서 노드를  보여주고자  하나 결과는 전체 노드수를 반환한다. 
		// 이유는 i가 함수가 만들어 지는 시점이 아니라 그냥 변수 i에 연결되기 때문에 결과적으로 런타임에는 최종 i값이 적용 된다. 
		for(i=0;i<nodes.length;i++){   
			nodes[i].onclick = function(e){
				alert(i);
			}
		}
	}
	//위 방법의 해결책
	var addHandeler2 = function(nodes){
		var i ;
		for(i=0;i<nodes.length;i++){
			nodes[i].onclick = function(i){
				return function(e){
					alert(i);
				};
			}(i);   // onclick에 새로  함수를 정의하고 i를  전달한다. 
			
		}
	}
	
	
	function pt(str){
		document.write("<br>"+str);
	}	
	
	window.onload = function(e){
		fade(document.getElementById("elem"));
	}
	
</script>
</head>
<body>
 <div id="elem">div element</div>
</body>
</html>